<template>
  <main class="wss-container">
    <div class="label-box-content">
      <!-- 悬浮按钮 ******************* -->
      <div class="suspendBtn" v-if="isRolesShow()">
        <p @click="clickOrderBtn" :class="selectState == 2 ? 'isActive' : ''">
          <svg-icon icon-class="dd_icon" /><b>订单</b>
        </p>
        <p @click="clickBillBtn" :class="selectState == 3 ? 'isActive' : ''">
          <svg-icon icon-class="fp_icon" /><b>发票</b>
        </p>
      </div>
      <!-- 悬浮按钮 end *******************-->

      <!-- 圈主 ************* -->
      <el-row :gutter="20" type="flex" v-if="selectState == 1">
        <el-col :span="10" style="heught: 500px">
          <NewCard :isright="true" title="圈主">
            <div class="businFilter"></div>
            <template #right>
              <ComForm
                :config="config"
                :list="comForm"
                @EventOnsubmit="inquireFn"
                @EventReset="reset"
                v-if="isRolesShow()"
              ></ComForm>
            </template>
            <!--  -->
            <div class="businTalbe" v-if="isRolesShow()">
              <ComTable
                v-hasPermi="['work:commercialManager:commissioner']"
                @handleCurrentChange="handleCurrentChange"
                @handleSizeChange="handleSizeChange"
                :config="config"
                :pagination="{
                  total: pageing.total,
                  pageNum: pageing.pageNum,
                  pageSize: pageing.pageSize,
                  isShowpagination: false,
                }"
                :list="tableData"
                :modes="tableModes"
                @EventRowClick="RowClickFn"
                @handleSort="handleSort"
              >
                <el-table-column
                  label="问金余额"
                  prop="voucher"
                  align="right"
                  sortable="custom"
                >
                  <template slot-scope="scope">
                    <p slot="reference">
                      <el-popover
                        placement="top-start"
                        trigger="hover"
                        :content="scope.row.voucher ? scope.row.voucher : '0'"
                      >
                        <p slot="reference">
                          {{ scope.row.voucher ? scope.row.voucher : "0" }}
                        </p>
                      </el-popover>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  label="累计充值"
                  prop="amount"
                  align="right"
                  sortable="custom"
                >
                  <template slot-scope="scope">
                    <p slot="reference">
                      <el-popover
                        placement="top-start"
                        trigger="hover"
                        :content="scope.row.amount ? scope.row.amount : '0'"
                      >
                        <p slot="reference">
                          {{ scope.row.amount ? scope.row.amount : "0" }}
                        </p>
                      </el-popover>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">
                  <template slot-scope="scope">
                    <el-popover
                      placement="top-start"
                      trigger="hover"
                      :content="scope.row.createTime"
                      v-if="scope.row.createTime"
                    >
                      <p slot="reference">
                        {{ getTime(scope.row.createTime) }}
                      </p>
                    </el-popover>
                  </template>
                </el-table-column>

                <!-- <el-table-column
                  align="left"
                  show-overflow-tooltip
                  label="创建时间"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.createTime">{{
                      scope.row.createTime.substring(0, 10)
                    }}</span>
                  </template>
                  
                </el-table-column> -->
              </ComTable>
              <div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 30, 40]"
                  :pager-count="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageing.total"
                >
                </el-pagination>
              </div>
              <div class="newusers" @click="inviteusers">
                <span>邀请新用户</span>
              </div>
            </div>
            <Comdrawer
              size="28%"
              title="邀请新用户"
              @eventColse="classModeClose"
              :drawer="classMode"
            >
              <div class="pay">
                <div class="pay_main">
                  <el-row>
                    <el-col :span="24">
                      <el-tabs type="card" v-model="activeName">
                        <el-tab-pane
                          @hook:mounted="getCanvas"
                          label="二维码"
                          name="first"
                          v-hasPermi="['work:commercialManager:obtain']"
                        >
                          <div class="scanQr" ref="scanQr" id="scanQr">
                            <el-avatar
                              :size="40"
                              :src="
                                userInfo.avatar ||
                                require('@/assets/images/defaultAvatar.jpg')
                              "
                            ></el-avatar>
                            <span>{{ userInfo.nickName }} 邀请您注册</span>
                            <p>问三师</p>
                            <!-- <img src="~@/assets/images/er.png" alt="" /> -->
                            <canvas
                              id="canvas"
                              ref="canvas"
                              style="height: 200px; width: 200px"
                            ></canvas>
                            <!-- <span
                              >二维码失效时间为：2022年6月18日<span
                                class="reset"
                                >重置</span
                              ></span
                            > -->
                            <span class="erHint"
                              >使用微信扫描二维码，注册问三师</span
                            >
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="手机号" name="scanQr">
                          <div class="phone">
                            <p>
                              输入手机号添加成员。添加后，对方将收到短信通知
                            </p>
                            <ul>
                              <li
                                v-for="(phone, index) in invitePhone"
                                :key="index"
                              >
                                <el-input
                                  v-model="phone.phone"
                                  placeholder="输入手机号"
                                >
                                </el-input>
                                <i
                                  class="el-icon-remove"
                                  @click="removeStateList(index)"
                                >
                                </i>
                              </li>
                              <el-button type="text" @click="addSouList"
                                >+ 继续添加</el-button
                              >
                            </ul>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </el-col>
                  </el-row>
                </div>

                <SubBtn v-if="activeName == 'first'">
                  <template slot="btn">
                    <el-button round class="elBtn" @click="classModeClose()"
                      >取消</el-button
                    >
                    <el-button
                      round
                      type="primary"
                      class="preservation"
                      @click="handleSniPastImg"
                      >保存</el-button
                    >
                    <!-- <el-button round type="primary" @click="handleSniPastCopy">复制</el-button> -->
                  </template>
                </SubBtn>
              </div>
            </Comdrawer>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <NewCard :isright="true" :title="`${title}`">
            <template slot="right" v-if="isRolesShow()">
              <!-- 按钮组 -->
              <el-button-group v-if="groupOrSelect">
                <el-button
                  type="primary"
                  :class="groupState == 1 ? 'isActive' : ''"
                  @click="
                    groupState = 1;
                    handleClick(groupState);
                  "
                  >消费记录</el-button
                >
                <el-button
                  type="primary"
                  :class="groupState == 2 ? 'isActive' : ''"
                  @click="
                    groupState = 2;
                    handleClick(groupState);
                  "
                  >充值记录</el-button
                >
                <!-- <el-button
                  type="primary"
                  :class="groupState == 3 ? 'isActive' : ''"
                  @click="
                    groupState = 3;
                    handleClick(groupState);
                  "
                  >用户赋值</el-button
                > -->
                <el-button
                  type="primary"
                  :class="groupState == 4 ? 'isActive' : ''"
                  @click="
                    groupState = 4;
                    handleClick(groupState);
                  "
                  >发票记录</el-button
                >
                <el-button
                  type="primary"
                  :class="groupState == 5 ? 'isActive' : ''"
                  @click="
                    groupState = 5;
                    handleClick(groupState);
                  "
                  >浏览记录</el-button
                >

                <el-button
                  type="primary"
                  :class="groupState == 6 ? 'isActive' : ''"
                  @click="
                    groupState = 6;
                    handleClick(groupState);
                  "
                  >商机分析</el-button
                >
                <el-button
                  type="primary"
                  :class="groupState == 7 ? 'isActive' : ''"
                  @click="
                    groupState = 7;
                    handleClick(groupState);
                  "
                  >圈员信息</el-button
                >
                <i @click="groupOrSelect = false"
                  ><svg-icon icon-class="ss_icon"
                /></i>
              </el-button-group>
              <!-- 按钮组  end-->

              <!-- 搜索表单 -->
              <div class="topFrom" v-else>
                <!-- 搜索表单 -->
                <!-- 消费记录搜索 -->
                <!-- <ComForm
                  :list="consumFrom"
                  @EventOnsubmit="consumptionfn"
                  v-if="groupState == 1"
                ></ComForm> -->
                <el-form ref="queryForm" :inline="true" v-if="groupState == 1">
                  <el-form-item>
                    <el-input v-model="consumFrom.phone"></el-input>
                  </el-form-item>
                  <el-form-item prop="noticeType">
                    <el-select v-model="consumFrom.type" placeholder="请选择">
                      <el-option
                        v-for="item in consumFrom.typeoption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="noticeType">
                    <el-select v-model="consumFrom.status" placeholder="请选择">
                      <el-option
                        v-for="item in consumFrom.statusoption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      style="
                        border-radius: 20px;
                        background-color: #f87a23;
                        border-color: #f87a23;
                        color: white;
                      "
                      @click="
                        consumptionfn(
                          consumFrom.phone,
                          consumFrom.type,
                          consumFrom.status
                        )
                      "
                      >搜索</el-button
                    >
                  </el-form-item>
                </el-form>

                <!-- 充值记录搜索 -->
                <!-- <ComForm
                  @EventOnsubmit="rechargeFromFn"
                  :list="rechargeFrom"
                  ref="rechargeFrom"
                  v-if="groupState == 2"
                ></ComForm> -->
                <el-form ref="queryForm" :inline="true" v-if="groupState == 2">
                  <el-form-item>
                    <el-input v-model="rechargeFrom.phone"></el-input>
                  </el-form-item>
                  <el-form-item prop="noticeType">
                    <el-select
                      v-model="rechargeFrom.type"
                      placeholder="订单类型"
                    >
                      <el-option
                        v-for="item in rechargeFrom.typeoption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      style="
                        border-radius: 20px;
                        background-color: #f87a23;
                        border-color: #f87a23;
                        color: white;
                      "
                      @click="
                        rechargeFromFn(rechargeFrom.phone, rechargeFrom.type)
                      "
                      >搜索</el-button
                    >
                  </el-form-item>
                </el-form>
                <!-- 用户赋值搜索 -->
                <!-- <ComForm :list="userFrom" v-if="groupState == 3"></ComForm> -->
                <!-- 发票记录搜索 -->
                <!-- <ComForm
                  :list="invoiceFrom"
                  @EventOnsubmit="invoiceFromFn"
                  v-if="groupState == 4"
                ></ComForm> -->
                <el-form ref="queryForm" :inline="true" v-if="groupState == 4">
                  <el-form-item>
                    <el-input v-model="invoiceFrom.no"></el-input>
                  </el-form-item>
                  <el-form-item prop="noticeType">
                    <el-select v-model="invoiceFrom.type" placeholder="请选择">
                      <el-option
                        v-for="item in invoiceFrom.typeoption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="noticeType">
                    <el-select
                      v-model="invoiceFrom.status"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in invoiceFrom.statusoption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      style="
                        border-radius: 20px;
                        background-color: #f87a23;
                        border-color: #f87a23;
                        color: white;
                      "
                      @click="
                        invoiceFromFn(
                          invoiceFrom.no,
                          invoiceFrom.type,
                          invoiceFrom.status
                        )
                      "
                      >搜索</el-button
                    >
                  </el-form-item>
                </el-form>
                <!-- 浏览记录搜索 -->
                <el-form ref="queryForm" :inline="true" v-if="groupState == 5">
                  <el-form-item prop="noticeType">
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in Browseoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      style="
                        border-radius: 20px;
                        background-color: #f87a23;
                        border-color: #f87a23;
                        color: white;
                      "
                      @click="BrowseFromFn(value)"
                      >搜索</el-button
                    >
                  </el-form-item>
                </el-form>
                <!-- 圈员信息搜索 -->
                  <el-form ref="queryForm" :inline="true" v-if="groupState == 7">
                  <el-form-item>
                    <el-input v-model="informationFrom.nickname" placeholder="圈员名称"></el-input>
                  </el-form-item>
                   <el-form-item>
                    <el-input v-model="informationFrom.phonenumber" placeholder="手机号"></el-input>
                  </el-form-item>
                 
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      style="
                        border-radius: 20px;
                        background-color: #f87a23;
                        border-color: #f87a23;
                        color: white;
                      "
                      @click="
                        informationFromFn(
                          informationFrom.nickname,
                          informationFrom.phonenumber,
                        )
                      "
                      >搜索</el-button
                    >
                  </el-form-item>
                </el-form>

                <el-button type="text" size="mini" @click="groupOrSelect = true"
                  >隐藏搜索</el-button
                >
              </div>
              <!-- 搜索表单 end -->
            </template>

            <!-- 消费记录 -->
            <div class="consumption" v-if="groupState == 1">
              <Consumption ref="Consumption" v-if="isRolesShow()"></Consumption>
            </div>
            <!-- 消费记录 end-->

            <!-- 充值记录 -->
            <div class="recharge" v-if="groupState == 2">
              <Recharge ref="Recharge"></Recharge>
            </div>
            <!-- 充值记录 end -->

            <!-- 发票记录 -->
            <div class="invoice" v-if="groupState == 4">
              <Invoice
                ref="Invoice"
              ></Invoice>
            </div>
            <!-- 发票记录 end -->

            <!-- 浏览记录 -->
            <div class="browse" v-if="groupState == 5">
              <Browse
                ref="Browse"
                @Browseoptionslist="Browseoptionslist"
              ></Browse>
            </div>
            <!-- 浏览记录 end -->

            <!-- 商机分析 -->
      
            <div class="analysis" v-if="groupState == 6">
              <div v-if="showlist.length">
                <h3 class="title">圈员标签</h3>
                <div class="label_search">
                  <div class="taglabel">
                    <el-tag
                      :key="indenx"
                      v-for="(tag, indenx) in showlist"
                      :disable-transitions="false"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
                <div class="labelMoreclass">
                  <el-button
                    size="mini"
                    class="label_more"
                    v-if="showlist.length > 7"
                    @click="labelMore"
                    >{{ flagMore ? "更多" : "收起"
                    }}<i
                      :class="
                        flagMore == true
                          ? 'el-icon-caret-bottom'
                          : 'el-icon-caret-top'
                      "
                    ></i
                  ></el-button>
                </div>
              </div>
              <h3 class="title">商机分析</h3>
              <div v-hasPermi="['work:opportunities:edit']">
                <el-table
                  v-hasPermi="['base:config:listOpportunities']"
                  :data="getBusinesslisttable"
                  style="width: 100%"
                  size="mini"
                >
                  <el-table-column prop="type" label="类别" width="100px">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        size="mini"
                        @change="Changetype(scope.row)"
                      >
                        <el-option
                          v-for="(item, index) in typelist"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="typeId" label="名称">
                    <template slot-scope="scope">
                      <el-cascader
                        :props="defaultParams"
                        :options="options"
                        v-model="selectedOptions"
                        @change="Changename(scope.row)"
                        size="mini"
                      ></el-cascader>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="source"
                    v-hasPermi="['work:opportunities:list']"
                    label="来源"
                  >
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        placeholder=""
                        size="mini"
                        @change="Changesource(scope.row)"
                      >
                        <el-option
                          v-for="(item, index) in getBusinessobjckt.sourceList"
                          :key="index"
                          :label="item.name"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="yjcjTime"
                    label="预计成交时间"
                    width="110"
                  >
                    <template slot-scope="scope">
                      <el-date-picker
                        v-model="scope.row[scope.column.property]"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        size="mini"
                        @change="Changetime(scope.row)"
                      >
                      </el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column prop="yjcje" label="预计成交价">
                    <template slot-scope="scope">
                      <el-input
                        placeholder="请输入内容"
                        v-model="scope.row[scope.column.property]"
                        clearable
                        size="mini"
                        @blur="Changecje(scope.row)"
                      >
                      </el-input>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="status"
                    v-hasPermi="['work:opportunities:list']"
                    label="状态"
                  >
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        placeholder=""
                        size="mini"
                        @change="Changestatus(scope.row)"
                      >
                        <el-option
                          v-for="(item, index) in getBusinessobjckt.statuslist"
                          :key="index"
                          :label="item.name"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注">
                    <template slot-scope="scope">
                      <el-input
                        placeholder="请输入内容"
                        v-model="scope.row[scope.column.property]"
                        clearable
                        size="mini"
                        @blur="Changeremaker(scope.row)"
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        class="removeBtn"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                <el-button class="addbtn" size="mini" @click="addinfo"
                  >+ 添加商机</el-button
                >
              </div>
            </div>
            <!-- 商机分析 end

            <!-- 圈员信息 -->
            <div class="information" v-if="groupState == 7">
              <Information
                ref="Information"
              ></Information>
            </div>
            <!-- 圈员信息 end -->
            <div class="businFilter"></div>

            <div class="businTalbe"></div>
          </NewCard>
        </el-col>
      </el-row>
      <!-- 圈主 ************* end-->

      <!-- 订单 **************-->
      <div class="orderList" v-else-if="selectState == 2">
        <OrderList></OrderList>
      </div>
      <!-- 订单 **************end -->

      <!-- 发票 ************** -->
      <div class="billList" v-else-if="selectState == 3">
        <BillList></BillList>
      </div>
      <!-- 发票 ************** end-->
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import ComTable from "@/wss/components/comTable.vue";
import Consumption from "../components/Consumption";
import Browse from "../components/Browse";
import Business from "../components/Business";
import Invoice from "../components/Invoice";
import Recharge from "../components/Recharge";
import User from "../components/User";
import Information from "../components/Information";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import { mapGetters } from "vuex";
import OrderList from "./orderList.vue";
import BillList from "./billList.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {
  getcirclemaster,
  getConsumptionapilist,
  getRechargelist,
  getinformationlist,
  getBrowselist,
  getinvoicelist,
  getBusinesslist,
  getBusinesslistobjck,
  selectCircleMasterlist,
  getBusinessnamelist,
  deleteBusinesslist,
  editBusinesslist,
  addBusinesslist,
} from "@/wss/newApi_3-24/askAround/index";
import RightPanelVue from "../../../../../views/tool/build/RightPanel.vue";
import { updateGetRoleIdApi } from "@/api/system/user.js";
import { getCommercialManagerObtainApi } from "@/wss/newApi_3-24/work/commercialManager.js";
// 把div保存为图片和复制到剪切板用到的
import { dataURLToBlob } from "@/wss/utils/wss.js";
import html2canvas from "html2canvas";
export default {
  name: "businessManage",
  components: {
    NewCard,
    ComForm,
    ComTable,
    Consumption,
    Browse,
    Business,
    Information,
    Invoice,
    Recharge,
    User,
    OrderList,
    BillList,
    Comdrawer,
    SubBtn,
  },
  data() {
    return {
      column: "", //排序字段
      order: "", //排序方式
      selectState: 1, // 当前选择的状态 1圈主 2订单 3发票
      groupState: 1, //1消费记录 2充值记录 3用户赋值 4发票记录 5浏览记录 6商机分析 7圈员信息
      groupOrSelect: true, // true显示按钮组 false显示搜索表单
      classMode: false, //弹出层
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像

      //浏览记录的搜索
      Browseoptions: [],
      value: "",
      // 消费订单的搜索
      consumFrom: {
        phone: "",
        type: "",
        status: "",
        typeoption: [
          {
            label: "法律",
            value: "1",
          },
          {
            label: "问答",
            value: "2",
          },
          {
            label: "头条",
            value: "3",
          },
          {
            label: "合同",
            value: "4",
          },
          {
            label: "咨询",
            value: "5",
          },
          {
            label: "项目",
            value: "6",
          },
          {
            label: "合同智审",
            value: "20",
          },
          {
            label: "诉讼模拟",
            value: "21",
          },
        ],
        statusoption: [
          {
            label: "已完成",
            value: "0",
          },
          {
            label: "未支付",
            value: "1",
          },
          {
            label: "已支付",
            value: "2",
          },
          {
            label: "进行中",
            value: "3",
          },
        ],
      },
      //充值订单的搜索
      rechargeFrom: {
        phone: "",
        typeoption: [
          {
            label: "直接购买",
            value: "1",
          },
          {
            label: "充值",
            value: "2",
          },
          {
            label: " 赋值",
            value: "3",
          },
          {
            label: " 转让",
            value: "4",
          },
          {
            label: " 赠送",
            value: "-1",
          },
        ],
      },
      //发票记录的搜索
      invoiceFrom: {
        modes: [
          {
            placeholder: "发票代码",
            formType: "input",
            mode: "no",
            label: "",
            value: "",
          },
          {
            placeholder: "发票类型",
            mode: "type",
            formType: "select",
            select: [
              {
                label: "普通发票",
                value: "1",
              },
              {
                label: "增值税专用发票",
                value: "2",
              },
            ],
          },
          {
            placeholder: "发票状态",
            mode: "status",
            formType: "select",
            select: [
              {
                label: "未开票",
                value: "1",
              },
              {
                label: "已开票",
                value: "2",
              },
              {
                label: "已邮寄",
                value: "3",
              },
            ],
          },
        ],
      },
      invoiceFrom: {
        no: "",
        type: "",
        status: "",
        typeoption: [
          {
            label: "普通发票",
            value: "1",
          },
          {
            label: "增值税专用发票",
            value: "2",
          },
        ],
        statusoption: [
          {
            label: "未开票",
            value: "1",
          },
          {
            label: "已开票",
            value: "2",
          },
          {
            label: "已邮寄",
            value: "3",
          },
        ],
      },
      // 浏览记录名称
      BrowseFromname: "",
      //浏览记录圈员名称
      Browseuser: [],
      //圈员信息的搜索
      informationFrom: {
        nickname:"",
        phonenumber:""
      },
      getBusinesslisttable:[],
      // 商机分析级联菜单配置
      options: [],
      selectedOptions: [],
      defaultParams: {
        label: "name",
        value: "pid",
        children: "children",
      },
      //新增商机分析数据集合
      addlist: {},
      typelist: [
        {
          label: "咨询",
          value: "5",
        },
        {
          label: "项目",
          value: "6",
        },
      ],
      activeName: "first",
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "手机号",
            formType: "input",
            mode: "phonenumber",
            label: "",
            value: "",
          },
          {
            placeholder: "用户姓名/ID",
            formType: "input",
            mode: "name",
            label: "",
            value: "",
          },
        ],
      },

      // 圈主信息
      tableData: [],

      title: "圈主信息", //圈主名称
      newtableList: [],
      // 圈主表格参数
      tableModes: [
        {
          showOverflowTooltip: true,
          label: "用户姓名",
          mode: "name",
        },
        {
          // showOverflowTooltip: true,
          // width: 110,
          label: "手机号",
          mode: "phonenumber",
          showOverflowTooltip: true,
        },
        // {
        //   label: "问金余额",
        //   mode: "voucher",
        //   sortable: true,
        //   align: "right",
        // },
        // {
        //   label: "累计充值",
        //   mode: "amount",
        //   sortable: true,
        //   align: "right",
        // },

        // {
        //   label: "注册时间",
        //   mode: "createTime",
        //   showOverflowTooltip: true,
        // },
      ],
      //圈主id
      masetrid: "",
      // 用户ID
      userId: "",
      //标签默认展示
      tags: [],
      showlist: [],
      //更多
      flagMore: true,
      //商机分析篩選的状态跟来源
      getBusinessobjckt: {
        sourceList: [],
        statuslist: [],
      },
      //商机分析的名称集合
      getBusinessnamelist: [],
     
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      total: "",

      // 邀请新用户手机列表
      invitePhone: [{ phone: "" }],
      cmId:'',//商务id
      placeId:'',//渠道id
    };
  },
  created() {
    this.getcirclemasterfn();
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },

  methods: {
    //分页排序<临时解决办法>
    async handleSort(column, prop, order) {
      this.column = column.prop;
      if (column.prop) {
        if (column.order == "ascending") {
          this.order = "asc";
        } else if (column.order == "descending") {
          this.order = "desc";
        }
      }
      let params = {
        sort: this.order,
        sortBy: this.column,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
      };
      let { code, rows, total } = await getcirclemaster(params);
      if (code != 200) return;
      let filterData = rows;
      this.pageing.total = total;
      this.total = total;
      //把金额的数据转换成有逗号和保留小数点两位
      filterData.forEach((item) => {
        if (item.voucher) {
          item.voucher = this.$options.filters["sumFilters"](item.voucher);
        }
        if (item.amount) {
          item.amount = this.$options.filters["sumFilters"](item.amount);
        }
        item.name = item.name.slice(0, item.name.length - 3);
      });
      this.tableData = filterData;
    },
    // 判断当前项目列表是否展示 根据角色
    isRolesShow() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin") || roles.includes("swzy")) {
        return true;
      } else {
        return false;
      }
    },

    async updateGetRoleIdFn() {
      // 这个接口开发时，后端人员比要忙，没有写接口文档
      let resutl = await updateGetRoleIdApi();
      if (resutl.code != 200) return;

      this.userRole = resutl;
    },

    consumption() {},
    //点击订单按钮
    clickOrderBtn() {
      if (this.selectState == 2) {
        this.selectState = 1;
      } else {
        this.selectState = 2;
      }
    },

    //点击发票按钮
    clickBillBtn() {
      if (this.selectState == 3) {
        this.selectState = 1;
      } else {
        this.selectState = 3;
      }
    },

    //获取圈主信息
    async getcirclemasterfn(data) {
      const { pageNum, pageSize } = this.pageing;
      let newdata = {
        pageNum,
        pageSize,
        phonenumber: data && data.phonenumber,
        name: data && data.name,
      };
      let { code, rows, total } = await getcirclemaster(newdata);
      if (code != 200) return;
      let filterData = rows;
      this.pageing.total = total;
      this.total = total;
      //把金额的数据转换成有逗号和保留小数点两位
      filterData.forEach((item) => {
        if (item.voucher) {
          item.voucher = this.$options.filters["sumFilters"](item.voucher);
        }
        if (item.amount) {
          item.amount = this.$options.filters["sumFilters"](item.amount);
        }
        item.name = item.name.slice(0, item.name.length - 3);
      });
      this.tableData = filterData;
      // filterData.forEach((itme) => {
      //   if (itme.createTime) itme.createTime = this.getTime(itme.createTime);
      //   if (itme.joinTime) itme.joinTime = this.getTime(itme.joinTime);
      // });
      this.newtableList = filterData;
      // console.log(rows, "123456");
    },

    // ****************************邀请新用户***************************
    // 获取渠道和商务id
    async getCommercialManagerObtain(){
      let result = await getCommercialManagerObtainApi()
      if(result.code==200){
        this.cmId = result.cmId
        this.placeId = result.placeId
      }
    },

    // 生成二维码
    async getCanvas() {
      var QRCode = require("qrcode");

      await this.getCommercialManagerObtain();

      let { organizationId = null } = this.$store.getters.userInfo;
      // let { placeId = null, cmId = null } = this.userRole;
      let href = 'm.wensanshi.com'
      let nickName = this.userInfo.nickName;
      console.log(
        `http://${href}/pages/invite/register/index?placeId=${this.placeId}&cmId=${this.cmId}&organizationId=${organizationId}&nickName=${nickName}`
      );
      // 线下接口
      if (process.env.VUE_APP_BASE_API == "/dev-api") {
        QRCode.toCanvas(
          this.$refs.canvas,
          `http://${href}/pages/invite/register/index?placeId=${this.placeId}&cmId=${this.cmId}&organizationId=${organizationId}&nickName=${nickName}`,
          function (error) {
            if (error) console.error(error);
            console.log("success!");
          }
        );
        // 线上问题
      } else {
        QRCode.toCanvas(
          this.$refs.canvas,
          `http://${href}/pages/invite/register/index?placeId=${this.placeId}&cmId=${this.cmId}&organizationId=${organizationId}&nickName=${nickName}`,
          function (error) {
            if (error) console.error(error);
            console.log("success!");
          }
        );
      }
    },
    //邀请新用户
    inviteusers() {
      this.classMode = true;
      console.log("inviteusers");
    },
    //添加手机号邀请
    async addSouList(index) {
      // this.sourceList.data.splice(index + 1, 0, {
      //   id: "",
      //   name: "",
      // });
      this.invitePhone.push({
        value: "",
        name: "",
        type: "o_from",
      });
      // let { code, msg } = await getAddOpportunitiesApi([
      //   {
      //     value: this.sourceList.data.length + 1,
      //     name: "",
      //     type: "o_from",
      //   },
      // ]);
      // if (code != 200) return;
      // this.$message({
      //   type: "success",
      //   message: msg,
      // });
    },
    //删除邀请手机号
    async removeStateList(item, index) {
      this.invitePhone.splice(index, 1);
      // let { code, msg } = await getConfigRemoveApi(item.id);
      // if (code != 200) return;
      // this.$message({
      //   type: "success",
      //   message: msg,
      // });
    },
    classModeClose() {
      this.classMode = false;
    },

    // 保存为图片
    handleSniPastImg() {
      let _this = this;
      this.$message({ message: "正在保存，请稍等！", type: "success" });
      // 第一个参数为需要保存的div的id名 第二个参数为保存图片的名称 第三个为当前的操作download下载copy复制
      setTimeout(() => {
        _this.saveImage("scanQr", "问三师邀请二维码", "download");
      }, 10);
    },
    // 复制图片到剪切板
    handleSniPastCopy() {
      let _this = this;
      this.$message({ message: "正在复制，请稍等！", type: "success" });
      // 第一个参数为需要保存的div的id名 第二个参数为保存图片的名称 第三个为当前的操作download下载copy复制
      setTimeout(() => {
        _this.saveImage("scanQr", "问三师邀请二维码", "copy");
      }, 10);
    },

    /*保存图片的方法（即按钮点击触发的方法）第一个参数为需要保存的div的id名 第二个参数为保存图片的名称 */
    saveImage(divText, imgText, action) {
      let canvasID = this.$refs[divText];
      let that = this;
      let a = document.createElement("a");
      html2canvas(canvasID).then((canvas) => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = dataURLToBlob(dom.toDataURL("image/png"));
        if (action == "download") {
          a.setAttribute("href", URL.createObjectURL(blob));
          //这块是保存图片操作  可以设置保存的图片的信息
          a.setAttribute("download", imgText + ".png");
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(blob);
          document.body.removeChild(a);
          //这块是保存图片操作  可以设置保存的图片的信息 end
        } else {
          //这块是复制到剪切板图片操作
          // clipboard.write 仅支持image/png的blob数据 目前只能在本地和https上复制
          navigator.clipboard.write([
            new window.ClipboardItem({
              [blob.type]: blob,
            }),
          ]);
          this.$message({ message: "复制成功！", type: "success" });
          //这块是复制到剪切板图片操作end
        }
      });
    },
    // ****************************邀请新用户*************************** end

   
    //查询浏览记录的回调
    Browseoptionslist(val) {
      console.log(val, "过来了吗？");
      this.Browseoptions = val;
    },
    // 转时间格式 220901
    getTime(days) {
      let time = days.split(" ")[0];
      let arr = time.split("-");
      return arr[0].slice(2) + arr[1] + arr[2];
    },
   
    //查询商机分析圈员记录
    async selectCircleMasterlistfn() {
      let { code, rows } = await selectCircleMasterlist({
        circleId: this.masetrid,
      });
      if ((code = 200)) {
        let result = rows;
        result.forEach((item) => {
          if (item.label) {
            this.tags = item.label ? item.label.split(";") : [];
          }
          this.showlist = this.tags.slice(0, 8);
        });
        // this.getBusinesslisttable = rows;
      }
    },
    //更多加载
    labelMore() {
      const _this = this;
      const list = _this.tags;
      let showlist = _this.showlist;
      // 是否是收起
      if (!_this.flagMore) {
        _this.showlist = list.slice(0, 8);
        _this.flagMore = !_this.flagMore;
        return;
      }
      // 当前长度
      let length = showlist.length;
      // 最大的长度
      let maxlength = list.length;
      // list够8就加8
      if (length + 8 < maxlength) {
        _this.showlist = [...showlist, ...list.slice(length, length + 8)];

        // 不够到底，全部给，并且把更多改成收起
      } else {
        _this.flagMore = !_this.flagMore;
        _this.showlist = list;
      }
    },
    //查询商机分析记录
    async getBusinesslistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        circleId: id,
      };
      let { code, data } = await getBusinesslist(newdata);
      if ((code = 200)) {
        this.getBusinesslisttable = data;
      }
    },
    //删除商机分析记录
    async deleteBusinesslistfn(id) {
      let { code } = await deleteBusinesslist(id);
      if ((code = 200)) {
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
        this.getBusinesslistfn(this.masetrid);
      }
    },
    //编辑商机分析记录
    async editBusinesslistfn(id) {
      let { code } = await editBusinesslist(id);
      if ((code = 200)) {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
        this.getBusinesslistfn(this.masetrid);
      }
    },
    //新增商机分析记录
    async addBusinesslistfn() {
      let { code } = await addBusinesslist();
      if ((code = 200)) {
        this.$message({
          showClose: true,
          message: "新增成功",
          type: "success",
        });
        this.getBusinesslistfn(this.masetrid);
      }
    },
    //查询设置来源状态记录
    async getBusinesslistobjckfn() {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
      };
      let { code, data } = await getBusinesslistobjck();
      if (code == 200) {
        let newdata = data;
        // console.log(data,"123")
        newdata.forEach((item) => {
          if (item.type == "o_from") {
            this.getBusinessobjckt.sourceList.push(item);
          } else if (item.type == "o_status") {
            this.getBusinessobjckt.statuslist.push(item);
          }
        });
      }
    },
    //查询商机设置状态跟来源记录
    async getBusinesslistfn(id) {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        circleId: id,
      };
      let { code, data, rows } = await getBusinesslist(newdata);
      if (code == 200) {
        this.getBusinesslisttable = rows;
      }
    },
    //查询商机分析姓名联级接口
    async getBusinessnamefn() {
      let { code, data, rows } = await getBusinessnamelist();
      if (code == 200) {
        this.options = rows;
      }
    },

  
    // 表格行点击了
    RowClickFn(row) {
      //切换展示tab，
      this.groupOrSelect = true;
      this.masetrid = row.circleId;
      this.userId = row.userId;
      this.title = row.name;
      // 清空上次搜索的消费记录
      this.consumFrom.phone = "";
      this.consumFrom.type = "";
      this.consumFrom.status = "",
        //清空上次充值纪录搜索
      this.rechargeFrom.phone = "";
      this.rechargeFrom.type = "";
      // 清空上次搜索的发票记录
      this.invoiceFrom.phone = "";
      this.invoiceFrom.type = "";
      this.invoiceFrom.status = "",
        // 清空上次搜索的浏览记录
      this.value = "";
      this.BrowseFromname = "";
       // 清空上次搜索的圈员记录
      this.informationFrom.nickname="",
      this.informationFrom.phonenumber="",
      //默认选择第一列
      this.groupState = 1,
        //默认查询对应ID的消费记录
        this.$nextTick(() => {
          this.$refs.Consumption.Consumptionlist(this.masetrid);
        });
    },
    // tab判断处理
    selecttab(value) {
      switch (value) {
        case 1:
          this.$nextTick(() => {
            this.$refs.Consumption.Consumptionlist(this.masetrid);
          });
          break;
        case 2:
          // this.getRechargelistfn(this.masetrid);
          this.$nextTick(() => {
            this.$refs.Recharge.Rechargelist(this.masetrid);
          });
          break;
        case 3:
          break;
        case 4:
          this.$nextTick(() => {
            this.$refs.Invoice.Invoicelist(this.masetrid);
          });
          break;
        case 5:
          this.$nextTick(() => {
            this.$refs.Browse.Browselist(this.masetrid);
          });
          break;
        case 6:
          // this.getBusinesslistfn(this.masetrid);
          this.selectCircleMasterlistfn(this.masetrid);
          this.getBusinesslistobjckfn();
          this.getBusinessnamefn();
          break;
        case 7:
            this.$nextTick(() => {
            this.$refs.Information.Informationlist(this.masetrid);
          });
          break;
      }
    },
    //tab切换事件
    handleClick(activeName) {
      if (!this.masetrid == "") {
        this.selecttab(activeName);
      } else {
        this.$message({
          message: "请选择某一条圈主信息",
          type: "warning",
        });
      }
    },
    //消费纪录的搜索查询
    consumptionfn(x, y, z) {
      let data = {
        phone: x,
        type: y,
        status: z,
      };
      this.$bus.$emit("SeachConsumption", data);
    },
    //充值记录的搜索查询
    rechargeFromFn(phonenumber, type) {
      let data = {
        phonenumber: phonenumber,
        type: type,
      };
      this.$bus.$emit("SeachRecharge", data);
    },
    //发票记录的搜索查询
    invoiceFromFn(no, type, status) {
      let data = {
        no: no,
        type: type,
        status: status,
      };
      this.$bus.$emit("SeachInvoice", data);
    },
    //浏览记录的搜索查询
    BrowseFromFn(val) {
      this.BrowseFromname = val;
      this.$bus.$emit("SeachBrowseFrom", val);
    },
    //圈员信息的搜索
    informationFromFn(nickname,phonenumber) {
      let data = {
        nickname: nickname,
        phonenumber: phonenumber,
      };
      this.$bus.$emit("SeachInformation", data);

    },
    //级联菜单触发事件
    Changetype(row) {
      console.log(row, "123");
      // console.log(value,"456");
      this.editBusinesslistfn(row);
    },
    // getTreeParents(data) {
    //     const parentKey = [];
    //     data.forEach((item) => {
    //       if (item.children && item.children.length) {
    //         parentKey.push(item.key);
    //         const temp = this.getTreeParents(item.children);
    //         if (temp.length) {
    //           parentKey.push(...temp);
    //         }
    //       }
    //     });
    //     return parentKey;
    //   },

    Changename(row) {
      row.typeId = this.selectedOptions[this.selectedOptions.length - 1];
      console.log(row, "123");
      // 1518768631886446600
      console.log(this.getTreeParents(this.options), "1111");
    },
    Changesource(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changecje(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changestatus(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changetime(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    Changeremaker(row) {
      this.editBusinesslistfn(row);
      console.log(row, "123");
    },
    //新增商机分析数据
    addinfo(item) {
      let newdata = {
        circleId: this.masetrid,
        type: "5",
        typeId: "",
        source: "转介1",
        status: "未转化",
        remark: "",
        yjcjTime: new Date(),
        yjcje: "100",
      };
      this.getBusinesslisttable.push(newdata);
      console.log(this.getBusinesslisttable, "123");
    },
    //删除商机分析数据
    handleDelete(index, row) {
      // console.log(row.id)
      this.deleteBusinesslistfn(row.id);
      console.log(index, row);
      // this.getBusinesslisttable.splice(index, 1);
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getcirclemasterfn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getcirclemasterfn();
    },
    //分类查询
    inquireFn(value) {
      // console.log(value[0].name, "11");
      let [{ phonenumber = "" }, { name = "" }] = value;
      let data = {
        phonenumber: phonenumber,
        name: name,
      };
      console.log(data, "data");
      this.getcirclemasterfn(data);
      // const arr = ["", null, undefined];

      // if (arr.includes(phonenumber) && arr.includes(nickName)) {
      //   this.tableData = this.newtableList;
      //   this.pageing.total = this.total;
      //   return;
      // }
      // let tableList = this.tableData;
      // let newArr = this.newtableList;
      // tableList = newArr.filter((item) => {
      //   console.log(item.nickName, "item.nickName");
      //   return (
      //     item?.phonenumber?.includes(phonenumber) &&
      //     item?.nickName?.includes(nickName)
      //   );
      //   // return item.nickname && item.nickname.includes(value[0].name);
      // });
      // // console.log(tableList, "tableList");
      // this.tableData = tableList;
      // console.log(tableList, "tableList");

      // this.pageing.total = this.tableData.length;
    },

    //重置
    reset() {
      this.form = {
        name: "",
      };
      // this.pageing = { pageNum: 1, pageSize: 10 };
    },
  },
};
</script>
<style scoped>
ul,
li {
  list-style: none;
  margin: 0;
  /* padding: 0; */
}

.label-box-content {
  height: 100%;
  position: relative;
}
/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}
>>> .el-form-item {
  width: auto;
  margin-bottom: 0;
}
.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.businFilter >>> .el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.label-box-content >>> .el-input--medium {
  width: 120px !important;
}
.businFilter >>> .container .right {
  margin-top: 0;
}
.el-input-number--mini {
  width: 100px;
}
.el-card {
  position: relative;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  /* position: relative; */
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 100%;
  overflow-y: auto;
}
.el-card >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}

::v-deep .el-table .ascending .sort-caret.ascending {
  border-bottom-color: #909aaa;
}
::v-deep .el-table .descending .sort-caret.descending {
  border-top-color: #909aaa;
}

/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}

.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}

.businFilter >>> .container .right {
  margin-top: 0;
}

.businTalbe {
  padding-bottom: 80px;
}

/* 按钮组 */
::v-deep .top .right {
  flex: none;
}
.el-button-group {
  display: flex;
}
.el-button-group .el-button {
  background-color: #f0f2f5;
  color: #2e3f5e;
  border: 1px solid #f0f2f5;
  padding: 10px 10px;
}
.el-button-group .el-button.isActive {
  background-color: #fff;
  color: #f87a23;
  font-weight: bold;
}
.el-button-group i {
  display: inline-block;
  font-size: 14px;
  background-color: #f0f2f5;
  padding: 10px 10px;
  cursor: pointer;
}
/* 按钮组 end*/

/* 搜索表单 */
.topFrom {
  display: flex;
}

/* ::v-deep .topFrom .right .el-button--default {
  display: none;
} */
::v-deep .topFrom > .el-button {
  color: #97a1b0;
}
::v-deep .topFrom > .el-button > span {
  border-left: 1px solid #97a1b0;
  margin-left: 10px;
  padding-left: 10px;
}
/* 隐藏重置按钮 */
::v-deep .right .el-button--default {
  display: none;
}
/* 搜索表单 end */

/* tabs切换 */
/* >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}
>>> .el-tabs__header {
  padding: 0;
  position: absolute;
  top: 10px;
  right: 20px;
  border-bottom: 0;
  background-color: #f0f2f5;
  border: 2px solid #f0f2f5;
}
>>> .el-tabs__item {
  padding: 0 15px !important;
  height: 32px;
  box-sizing: border-box;
  line-height: 32px;
  display: inline-block;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  color: #303133;
  position: relative;
  border-bottom: 0 !important;
  border-left: 0 !important;
}
>>> .el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
}
>>> .el-tabs__item.is-active {
  background-color: #fff;
  color: #f87a23;
} */
>>> .el-pagination .el-input--medium {
  width: 80px !important;
}
.addbtn {
  /* width: 0%; */
  border-radius: 10px;
  color: #e37709;
  border: 1px #e37709 solid;
  margin: 10px;
  text-align: center;
}

/* 商机分析 */
.taglabel {
  display: flex;
  flex-wrap: wrap;
}
.taglabel .el-tag {
  width: 11%;
  margin: 5px;
  background-color: #f5f7fa;
  border-color: #f5f7fa;
  padding: 0;
  text-align: center;
  color: #2e3f5e;
  border-radius: 18px;
}
.taglabel .el-tag:nth-child(9n) {
  margin-right: 0;
}
.label_more:hover,
.label_more:focus {
  background-color: transparent;
  color: #f87a23;
}

.analysis .addbtn {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  background-color: #f8f8f8;
  border: 0;
  border-radius: 0;
  padding: 15px 0;
  font-size: 14px;
  color: #606e84;
}
.analysis .removeBtn {
  color: #f87a23;
}
/* 商机分析 end */

/* 悬浮按钮 */
.suspendBtn {
  position: absolute;
  z-index: 999;
  right: 20px;
  bottom: 20px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  border-radius: 22px;
  background-color: #f8f8f8;
  color: #909aaa;
}
.suspendBtn p {
  margin: 15px 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
.suspendBtn p:first-child {
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 15px;
}
.suspendBtn p > svg {
  display: inline-block;
  margin-bottom: 6px;
  color: #909aaa;
  font-size: 20px;
}
.suspendBtn p > b {
  display: block;
  font-weight: 400;
}
.suspendBtn p.isActive {
  color: #fc7e1e;
}
.suspendBtn p.isActive svg {
  color: #fc7e1e;
}
/* 悬浮按钮 end*/

/* 订单列表 */
.orderList {
  height: 100%;
}

/* 发票列表 */
.billList {
  height: 100%;
}
.pagination {
  padding: 2px 0px;
  /* margin: 0 auto; */
  text-align: center;
}
.newusers {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  width: 100%;
  font-size: 16px;
  margin-top: 15px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
  text-align: center;
}
.newusers:hover {
  color: #1890ff;
}

.pay,
.pay_main {
  height: 100%;
}
::v-deep .pay_main .el-col,
::v-deep .pay_main .el-tabs {
  height: 100%;
}
::v-deep .pay_main .el-tabs__header {
  display: none;
  border: 0;
  padding: 0px 20px 0 20px;
}
::v-deep .pay_main .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid #f0f2f5;
  background-color: #f0f2f5;
}
::v-deep .pay_main .el-tabs__item {
  width: 49%;
  height: 34px;
  line-height: 34px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  background-color: #f0f2f5;
}
::v-deep .pay_main .el-tabs__item.is-active {
  background-color: #fff;
  color: #39486f;
}
::v-deep .pay_main .el-tabs__item:hover {
  color: #39486f;
}

::v-deep .pay_main .el-tabs__content {
  height: calc(100% - 50px);
}
::v-deep .pay_main .el-tabs__content .el-tab-pane {
  height: 100%;
}

.payBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 30px;
}

.payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 30px;
}
.payBtn .preservation {
  background-color: #ffffff;
  color: #f87a23;
  border-color: #dadee2;
}
.payBtn .el-button:hover {
  opacity: 0.9;
}
.scanQr {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 80px;
  background: url("~@/wss/assets/image/dt_img.png") center no-repeat;
  background-size: cover;
}
.scanQr .el-avatar {
  margin: 15px;
  width: 40px;
  height: 40px;
}
::v-deep .scanQr .el-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanQr img {
  width: 150px;
  margin: 15px;
}
.scanQr p {
  font-size: 18px;
  font-weight: bold;
  color: #2e3f5e;
}
.scanQr span {
  font-size: 12px;
  color: #999;
}
.scanQr span .reset {
  font-size: 12px;
  color: #f87a23;
  margin-left: 10px;
}
.scanQr span.erHint {
  background-color: #a5abbd;
  color: #fff;
  padding: 8px 20px;
  border-radius: 18px;
}
.phone {
  padding: 0 20px 0 20px;
}
.phone p {
  font-size: 12px;
  color: #999999;
}
.phone ul .el-button {
  color: #f87a23;
}
.phone ul > li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.phone ul > li .el-input {
  width: 90% !important;
}
.phone ul > li > i {
  color: #909aaa;
  margin-left: auto;
}
/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .subBtn .el-button--primary:hover {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>
<style>
.el-tooltip__popper.is-light {
  border: 0 !important;
  box-shadow: 2px 4px 16px 2px #e2e2e2;
  padding: 20px;
}
.el-tooltip__popper.is-light h3,
.el-tooltip__popper.is-light p {
  margin: 0;
}
.el-tooltip__popper.is-light h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.el-tooltip__popper.is-light p {
  color: #666;
  font-size: 12px;
  line-height: 22px;
}
.el-tooltip__popper .popper__arrow {
  /* 上方箭头 */
  border-top-color: #fff !important;
  /* 下方箭头 */
  border-bottom-color: #fff !important;
}
.el-tooltip__popper .popper__arrow:after {
  border-top-color: #fff !important;
  border-bottom-color: #fff !important;
}

@media (max-width: 1180px) {
  .el-col-14 .top {
    display: block;
  }
  .el-button-group .el-button {
    padding: 7px 3px !important;
    font-size: 12px;
  }
}
</style>
